<template>
  <div class="team">
    <!-- 操作栏 -->
    <el-row type="flex" class="team-header" justify="end"/>
    <el-row :gutter="15" class="team-content">
      <el-col v-for="(list,index) in floderList" :key="index" :xs="24" :sm="12" :md="8" :lg="8">
        <div class="team-card complete clearfix" style="cursor:pointer;" @click="innerfloder(list.floderName)">
          <span class="groupname fl">{{ list.floderName }}</span>
          <span class="fr iconframe" @click.stop="toStar(index)">
            <svg-icon :icon-class="list.starIcon" class-name="icon-large" />
          </span>
          <span class="fr iconframe" @click.stop="modifySet(index)">
            <svg-icon icon-class="setter" class-name="icon-default" />
          </span>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8">
        <div class="team-card" style="cursor:pointer;" @click="newFloder">
          <svg-icon icon-class="add_group" class-name="team-icon_add"/>
        </div>
      </el-col>
    </el-row>

    <!-- Dialog -->
    <el-dialog :visible.sync="dialogNewFolVisible" :before-close="beforDialogClose" title="新建文件夹">
      <el-tabs v-model="tabpane_Idx">
        <el-tab-pane name="first" label="文件设置">
          <div class="tabpane-content">
            <div class="tabpane-col">
              <label for="floderName" class="tabpane-col_desc">文件名:</label>
              <el-input id="floderName" v-model="floderName" placeholder="请输入文件名" class="tabpane-col_opera"/>
            </div>
            <div class="tabpane-col">
              <label class="tabpane-col_desc">图片:</label>
              <el-upload
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                action="http://localhost:2333/file/upload"
                class="avatar-uploader tabpane-col_opera">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
                <div slot="tip" class="el-upload__tip">点击框框就可上传图片，只能上传jpg/png文件</div>
              </el-upload>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="second" label="其他设置">
          <el-button type="danger" icon="el-icon-delete" circle/>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNewFolVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure_floderSet">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .el-col {
    margin-bottom: 15px;
  }
</style>

<script>
import './index.scss'
import { parseTime } from '../../utils/index'

export default {
  data() {
    return {
      // 文件夹信息设置模块的显示状态
      dialogNewFolVisible: false,
      // 默认展示的tab下标
      tabpane_Idx: 'first',
      // 文件夹名字
      floderName: '',
      // 背景图片路径
      imageUrl: '/src/assets/zhanwei_images/true.jpg',
      // 文件夹列表
      floderList: [],
      // 是否来自已创建文件夹的设置(螺丝帽)打开dialog的
      isFromFlodered: false,
      // 用户账号
      username: ''
    }
  },
  created() {
    this.username = this.$store.state.user.username
    this.getList()
  },
  methods: {
    // 点击关注
    toStar(index) {
      this.floderList[index].star = !this.floderList[index].star

      if (this.floderList[index].star === true) {
        this.$message({
          message: this.floderList[index].flodername + '关注成功',
          type: 'warning'
        })
        this.floderList[index].starIcon = 'star_active'
      } else {
        this.$message({
          message: this.floderList[index].flodername + '取消关注',
          type: 'warning'
        })
        this.floderList[index].starIcon = 'star'
      }
    },
    // 修改文件夹配置
    modifySet(index) {
      this.dialogNewFolVisible = true
      this.isFromFlodered = true
    },
    // 新建文件夹
    newFloder() {
      this.dialogNewFolVisible = true
      this.isFromFlodered = false
    },
    // 上传成功后 预览图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    // 小组背景图上传前 进行格式和大小验证
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 从后台获取数据,实例化文件夹列表
    getList() {
      this.$store.dispatch('GetFloderInfo', this.username).then(floderList => {
        this.floderList = floderList.map(ele => {
        // 触发视图更新
          this.$set(ele, 'star', false)
          this.$set(ele, 'starIcon', 'star')
          return ele
        })
      })
    },
    // 当dialog 关闭的时候
    beforDialogClose(done) {
      done()
      this.floderName = ''
      this.isFromFlodered = false
    },
    // 确认小组配置操作
    sure_floderSet() {
      // 当为新建组操作
      if (this.isFromFlodered === false) {
        const getItem = {
          floderName: this.floderName,
          // ***坑
          imagePath: this.imageUrl,
          setTime: parseTime(new Date()),
          childrens: [],
          floderPath: 'xxx'
        }
        this.$store.dispatch('CreateFloder', getItem, this.username).then((msg) => {
          this.$message({
            message: msg,
            type: 'success'
          })
        }).catch(err => {
          this.$message({
            message: err,
            type: 'error'
          })
        })
        this.init({
          dialogNewGroVisible: false
        })
      } else { // 修改组配置操作
        this.$message({
          message: '修改文件夹',
          type: 'warning'
        })
      }
    },
    // 进到组内部==> 显示文件列表
    innerfloder(floderName) {
      const name = 'files'
      this.$router.push({ name, params: { id: floderName }})
    }
  }
}
</script>

